<template>
  <div class="table">
    <!--筛选区域-->
    <el-form
      inline
      class="app-form"
      label-width="110px"
      ref="searchForm"
      :model="searchForm">
      <el-row>
        <el-col :span="6">
          <el-form-item label="操作类型：" prop="optType">
            <el-select 
              size="mini" 
              multiple 
              v-model="searchForm.optType" 
              :placeholder="$t('common.placeholder.select')">
              <el-option
                v-for="item in optTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="多选含全选：" prop="mulSelecteds">
            <MultipleSelect
              :selectOptions="selectOptions"
              :mulSelectLoading="mulSelectLoading"
              :mulSelecteds="searchForm.mulSelecteds"
              @update:updateMultipleSelect="val => searchForm.mulSelecteds = val">
            </MultipleSelect>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="登录名：" prop="uaerName">
            <el-input 
              size="mini" 
              v-model="searchForm.uaerName" 
              :placeholder="$t('common.placeholder.input')" 
              clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="禁止输入特殊字符：" label-width="140px" prop="content">
            <el-input 
              size="mini"
              v-emoji 
              v-model="searchForm.content" 
              :placeholder="$t('common.placeholder.input')" 
              clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="操作时间：">
            <el-date-picker
              size="mini"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="dateTimeRange"
              type="datetimerange"
              range-separator="~"
              :start-placeholder="$t('common.placeholder.startTime')"
              :end-placeholder="$t('common.placeholder.endTime')"
              @change="dataTimeChange">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6"><el-form-item></el-form-item></el-col>
        <el-col :span="6"><el-form-item></el-form-item></el-col>
        <el-col :span="6" style="text-align:center" class="mt-5">
          <el-button size="small" type="primary" icon="el-icon-search" @click="searchBtn">
            {{$t('common.button.search')}}
          </el-button>
          <el-button size="small" icon="el-icon-refresh" @click="resetForm('searchForm')">
            {{$t('common.button.reset')}}
          </el-button>
          <el-button size="small" type="success" icon="el-icon-download" :loading="exportLoading" @click="exportBtn">
            {{$t('common.button.export')}}
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 列表区域 -->
      <el-table 
        :data="journalTable" 
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        stripe 
        border
        size="mini" 
        height="500"
        cell-class-name="cellclazz"
        header-cell-class-name="headercell" 
        v-loading="tableLoading" 
        highlight-current-row
        @sort-change="tableSortChange">
        <el-table-column prop="userName" align="center" label="登录名" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">{{scope.row.userName | filterNullValue}}</template>
        </el-table-column>
        <el-table-column prop="userIdentity" align="center" label="用户身份" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">{{scope.row.userIdentity|filterNullValue}}</template>
        </el-table-column>
        <el-table-column prop="optContent" align="center" width="600" label="操作内容" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">{{scope.row.optContent | filterNullValue}}</template>
        </el-table-column>
        <el-table-column prop="success" align="center" width="120" label="操作是否成功" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <el-tag size="mini" type="success" v-if="scope.row.success == '成功'">成功</el-tag>
            <el-tag size="mini" type="danger" v-else-if="scope.row.success == '失败'">失败</el-tag>
            <el-tag size="mini" v-else>{{scope.row.success | filterNullValue}}</el-tag> 
          </template>>
        </el-table-column>
        <el-table-column prop="optTime" align="center" label="操作时间" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">{{scope.row.optTime | filterNullValue}}</template>>
        </el-table-column>
      </el-table>
    <!-- 分页区域 -->
    <Pagination 
      class="pagination" 
      style="text-align:right"
      :total="searchForm.total"
      :page.sync="searchForm.pageNumber"
      :limit.sync="searchForm.pageSize"
      @pagination="pageChange">
    </Pagination>
  </div>
</template>

<script>
import  { getLogTest}  from '@/api/api';
import  { getDownload }  from '@/utils/download';
  export default {
    data() {
      return {
        optTypeOptions:[],
        // 多选
        selectOptions:[],
        mulSelectLoading:false,
    
        tableLoading: false,
        exportLoading: false,
        dateTimeRange:[],
        configTableSelected:[],
        journalTable: [], 
        searchForm:{
          uaerName:'',
          content:'',
          optType:[],
          mulSelecteds:[],
          startTime:'',
          endTime:'',
          pageNumber: 1, 
          pageSize: 10,
          total:0
        },
      }
    },
    methods: {
      loadOptions(){
        this.mulSelectLoading = true;
        setTimeout(()=>{
          const options = [
            { label: '上海', value: 'sh' },
            { label: '南京', value: 'nj' },
            { label: '重庆', value: 'cq' },
            { label: '武汉', value: 'wh' },
          ]
          this.selectOptions = options;
          this.mulSelectLoading = false;
          this.searchForm.mulSelecteds = ['cq','nj'];
        },1500)
      },
      // 日期变化
      dataTimeChange(){
        if(this.dateTimeRange && this.dateTimeRange.length > 1){
          this.searchForm.startTime = this.dateTimeRange[0];
          this.searchForm.endTime = this.dateTimeRange[1];
        }else{
          this.searchForm.startTime = '';
          this.searchForm.endTime = ''; 
        }
      },
      // 表格排序改变
      tableSortChange(val){
        let sortItem = {}, sortArr = [];
        sortItem.param = val.prop;
        if(val.order == 'descending'){
          sortItem.type = 'desc';
        }else if(val.order == 'ascending'){
          sortItem.type = 'asc';
        }
        sortArr.push(sortItem);
        this.searchForm.sort = sortArr;
        this.getLog();
      },
      pageChange(){
        this.getLog();
      },
      // 查询
      searchBtn(){
        this.searchForm.pageNumber = 1;
        this.getLog();
      },
      // 重置
      resetForm(formName){
        this.searchForm.startTime = '';
        this.searchForm.endTime = '';
        this.dateTimeRange = [];
        this.$refs[formName].resetFields();
      },
      // 导出
      async exportBtn(){
        let a = await getDownload('/logController/backupLog');
        console.log(a)
      },
      // 获取日志配置列表
      getLog(){
        this.tableLoading = true;
        /*
         * axios post 请求几种方式
         * 
        */
        // 1. json格式（浏览器默认自动转）
        const params = {
          uaerName:this.searchForm.uaerName,
          optType:this.searchForm.optType,
          mulSelecteds:this.searchForm.mulSelecteds,
          startTime:this.searchForm.startTime,
          endTime:this.searchForm.endTime,
          pageNumber: this.searchForm.pageNumber, 
          pageSize: this.searchForm.pageSize,
        }
        // 2. qs.stringify序列化 
        const qs = require('qs');
        const params2 = qs.stringify(params); 
        // 3.Form Data 格式
        let params3 = new FormData();
        params3.append("uaerName",this.searchForm.uaerName);
        params3.append("optType",this.searchForm.optType);
        params3.append("mulSelecteds",this.searchForm.mulSelecteds);
        params3.append("startTime",this.searchForm.startTime);
        params3.append("endTime",this.searchForm.endTime);
        params3.append("pageNumber",this.searchForm.pageNumber);
        params3.append("pageSize",this.searchForm.pageSize);
        
        getLogTest(params2).then((res) => {
          if(res.data.success){
            this.journalTable = res.data.data.result || [];
            this.searchForm.total = res.data.data.total || 0;
            this.tableLoading = false;
          }else{
            this.tableLoading = false;
            const msg = res.data.msg;
            this.$message.error(msg);
          }
        }).catch((err) => {
          this.tableLoading = false;
          this.$message.error(err);
        })
      }
    },
    mounted(){
      this.loadOptions();
      // this.getLog();
    }
  }
</script>

<style lang="scss" scoped>
@import "@/assets/css/_handle.scss";
.table{
  .app-form{
    /deep/.el-form-item{
      margin-bottom: 10px;
      width: 98%;
      .el-form-item__content{
        width: 70%;
        .el-select{
          width: 100%;
        }
      }
    }   
  }
  .el-table{
    @include background_color('bg-color');
  }
  .pagination{
    margin-top: 5px;
  }
}
</style>

